<template>
	<view class="container">
		<view class="postx" :style="scrollTop>0?'background:#FFF;':''">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view class="flexJusp" style="font-size: 36rpx;font-weight: bold;text-align: center;padding:0 20rpx;"
				:style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
				<view style="width:50rpx;" @click="back">
					<image style="width:20rpx;height:34rpx;" src="/static/image/mv_tuichu.png"></image>
				</view>
				<view>{{statusName}}</view>
				<view style="width:50rpx;"></view>
			</view>
		</view>
		<view style="width: 750rpx;height: 650rpx;background: linear-gradient(228deg,#CCEAFF,#F9FBFC);">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view :style="'height:'+navigationBarHeight+'px'"></view>
			<view class="flex">
				<view class="flex"
					style="padding:0 24rpx;height: 60rpx;background: #EBFAFE;border-radius: 34rpx;line-height:60rpx;">
					<view
						style="width: 12rpx;height: 12rpx;background: #2089FF;border-radius:50%;margin:24rpx 12rpx 0 0;">
					</view>
					<view v-if="detail.moshi == 1">一口价订单</view>
					<view v-if="detail.moshi == 2">报价下单</view>
					<view v-if="detail.moshi == 3">悬赏下单</view>
					<view v-if="detail.moshi == 4">分时零工</view>
				</view>
			</view>
			<view class="flex" style="margin-top:32rpx;">
				<image style="width:34rpx;height:42rpx;margin:34rpx 34rpx 0 40rpx;" src="/static/image/02_1gb.png">
				</image>
				<view>
					<view><text
							style="font-size: 30rpx;font-weight: bold;margin-right:20rpx;">{{detail.username}}</text>{{detail.phone}}
					</view>
					<view style="width: 540rpx;font-size: 26rpx;color: #4E4E4E;">{{detail.address}}
						{{detail.addressdetail}}</view>
				</view>
			</view>
			<image style="width: 100%;height:4rpx;" src="/static/image/02_1c.png"></image>
			<view
				style="width: 670rpx;background: #FFFFFF;border-radius: 20rpx;margin:20rpx;padding:16rpx 20rpx 20rpx;">
				<view style="font-weight: bold;">{{ detail.limu }}</view>
				<view v-for="(item,index) in detail.xiangmu" :key="index" class="flex"
					style="margin:12rpx 0 16rpx;border-bottom:2rpx solid #F0F0F0;padding-bottom:20rpx;">
					<ImgPreview :list="item.listHuanimg"></ImgPreview>
					<view style="width:490rpx;margin-left:16rpx;">
						<view style="font-weight: bold;">{{item.goodsname}}</view>
						<view class="flexJusp" style="font-size:24rpx;color: #666666;margin:10rpx 0;">
							<view>服务项目：{{item.xiangmu}}</view>
							<view>×{{item.number}}</view>
						</view>
						<view style="padding:20rpx 18rpx;background: #F7F7F7;border-radius: 16rpx;"
							v-if="item.beizhu && item.beizhu != ''">{{ item.beizhu }}</view>
					</view>
				</view>
				<view style="text-align: right;font-size:26rpx" v-if="detail.moshi== 1">
					<text>{{detail.flag == 1 ? '待支付' : '订单金额'}}</text>
					<text style="font-size: 30rpx;font-weight: bold;color: #E90000;">￥{{detail.price}}</text>
				</view>
				<view style="text-align: right;font-size:26rpx" v-if="detail.moshi== 2 && detail.qiprice != 0">
					<text>预期报价金额:</text>
					<text v-if="detail.qiprice !== 0" style="font-size: 30rpx;font-weight: bold;color: #E90000;">
						￥{{ detail.qiprice }}
					</text>
				</view>
				<view style="text-align: right;font-size:26rpx" v-if="detail.moshi== 3">
					<text>悬赏金额:</text>
					<text style="font-size: 30rpx;font-weight: bold;color: #E90000;">￥{{detail.price}}</text>
				</view>
				<view style="text-align: right;font-size:26rpx" v-if="detail.moshi== 4">
					<text>小时金额:</text>
					<text style="font-size: 30rpx;font-weight: bold;color: #E90000;">￥{{detail.price}}</text>
				</view>
			</view>
			<view style="font-size: 30rpx;font-weight: bold;margin:32rpx 0 20rpx 22rpx;">订单信息</view>
			<view style="background: #FFFFFF;border-radius: 20rpx;margin:0 20rpx;padding:20rpx;font-size:26rpx;">
				<view class="flexJusp">
					<view style="color: #666666;">订单编号</view>
					<view>{{detail.order_id}}</view>
				</view>
				<view class="flexJusp" v-if="detail.moshi== 4">
					<view style="color: #666666;">所需人数</view>
					<view>{{detail.xunumber}}</view>
				</view>
				<view class="flexJusp" v-if="detail.moshi== 4">
					<view style="color: #666666;">上门时间段</view>
					<view v-for="item in detail.fentime" :key="index">{{item+":00"}}</view>
				</view>
				<view class="flexJusp" style="margin:10rpx 0;">
					<view style="color: #666666;">下单时间</view>
					<view>{{detail.ordertime}}</view>
				</view>
				<view class="flexJusp" v-if="detail.moshi != 4">
					<view style="color: #666666;">期待上门时间</view>
					<view>{{detail.qitime}}</view>
				</view>
			</view>
			<view v-if="detail.userid" style="margin:32rpx 0 20rpx 22rpx;font-size: 30rpx;font-weight: bold;">师傅简介
			</view>
			<view v-if="detail.userid" class="flexJusp"
				style="background: #FFFFFF;border-radius: 16rpx;margin:0 20rpx;padding:16rpx;">
				<view class="flex" @click="details(detail.userid)">
					<image style="width:80rpx;height:80rpx;" :src="detail.icon"></image>
					<view style="font-size: 30rpx;font-weight: bold;line-height:80rpx;margin:0 20rpx 0 16rpx;">
						{{detail.name}}
					</view>
					<!-- <view
						style="text-align: center; width: 110rpx;height: 40rpx;border-radius: 20rpx;border: 2rpx solid #F46325;font-size: 24rpx;color: #F46325;line-height: 40rpx;margin-top:20rpx;">
						99分</view> -->
				</view>
				<view class="buttons" style="width:152rpx;height:52rpx;line-height:52rpx;margin-top: 14rpx;" v-if="laxin == ''"
					@click="dianhua">立即联系</view>
			</view>
			<view style="height:110rpx;"></view>
			<view style="height:env(safe-area-inset-bottom);"></view>
		</view>

		<view class="posts">
			<view class="flex" style="flex-direction:row-reverse;">
				<view class="buttons" v-if="detail.flag==8 && laxin == ''" @click="evaluate" style="margin-left:24rpx;">立即评价</view>
				<view class="buttons" v-if="detail.flag==5 && laxin == ''" @click="complete" style="margin-left:24rpx;">确认验收</view>
				<view class="buttons" @click="quotation(item)" v-if="detail.flag==3 && laxin == ''" style="margin-left:24rpx;">查看报价
				</view>
				<view @click="fukuan" class="buttons" v-if="detail.flag==1 && laxin == ''" style="margin-left:24rpx;">去付款</view>
        <view v-if="!detail.name" style="display: flex;">
          <view class="buttonx" @click="quorder"
                v-if="(detail.flag != 6 && laxin == '') || (laxin == 1 && detail.openid == '')">
            <view>取消订单</view>
          </view>
        </view>

				<!-- <view class="buttonx" v-if="detail.flag==6">申请售后</view> -->
			</view>
			<view style="height:env(safe-area-inset-bottom);"></view>
		</view>
	</view>
</template>

<script>
	import {systemInfo} from '@/https/mixin.js'
	import ImgPreview from '@/components/ImgPreview.vue'
	import preview from '@/commonjs/preview.js'
	export default {
		components: {
			ImgPreview
		},
		mixins: [systemInfo],
		data() {
			return {
				statusName: '待付款',
				detail: {},
				scrollTop: 0,
				flag: 0,
        laxin: '',
			}
		},
		onLoad(option) {
      this.laxin = option.laxin
			this.id = option.id
			this.loads()
			this.getSystemInfo()
			this.fen()
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop // 获取当前页面滚动高度
			this.scrollTop = event.scrollTop
		},
		methods: {
			fen() {
				// console.log(this.detail)
			},
			quorder(item) {
				var self = this;
				// 待上门  进行中
				if (self.flag == 5) {
					uni.showToast({
						title: this.statusName + '不能取消订单',
						icon: 'none',
						duration: 2000
					})
				}
				// 待付款	待报价	选师傅	进行中
				else if (self.flag == 1 || self.flag == 2 || self.flag == 3 || self.flag == 9 || self.flag == 4) {
					uni.showModal({
						content: '确定要取消' + this.statusName + '订单吗？',
						success: function(res) {
							if (res.confirm) {
								self.$httpapi('quorder', 'POST', {
									orderId: self.id
								}).then(res => {
									if (res.code == 200) {
										self.$utils.saveSyncTime()
										uni.navigateBack()
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}
								})

							} else if (res.cancel) {}
						},
					});
				}

			},
			details(id) {
				uni.navigateTo({
					url: '/pages/index/MasterDetails/MasterDetails?id=' + id
				})
			},
			dianhua() {
				uni.makePhoneCall({
					phoneNumber: this.detail.shifuphone
				});
			},
			evaluate() {
				uni.navigateTo({
					url: '/pages/myOrder/evaluate/evaluate?id=' + this.id + '&userid=' + this.detail.userid +
						'&type=2'
				})
			},
			fukuan() {
				var that = this
				this.$httpapi('addPackageListtwo', 'POST', {
					orderId: this.id,
					price: this.detail.allprice,
				}).then(res => {
					if (res.code === 200) {
						if (res.data) {
							if (res.data.status === 1) {
								that.$utils.saveSyncTime()
								that.loads()
							} else {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: function(rexx) {
										that.$utils.saveSyncTime()
										that.loads()
									},
									fail: function(err) {}
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			complete(item) {
				let that = this
				this.$httpapi('okyan', 'POST', {
					orderId: this.id
				}).then(res => {
					if (res.code == 200) {
						that.$utils.saveSyncTime()
						this.loads()
					}
				})
			},
			loads() {
				this.$httpapi('orderdetail', 'POST', {
					orderId: this.id
				}).then(res => {
					this.detail = res.data
					this.detail.moshi = Number(this.detail.moshi)
					let time = this.detail.fentime.split(",")
					this.detail.fentime = time
					this.flag = res.data.flag

					// 图片的数量
					this.detail.xiangmu.forEach((item) => {
						// 预览图片 把图片.split(",")后放在listHuanimg数组里面
						preview.totalControl(item)
					})
					if (res.data.flag == 1) {
						this.statusName = '待付款'
					} else if (res.data.flag == 2) {
						this.statusName = '待报价'
					} else if (res.data.flag == 3) {
						this.statusName = '选师傅'
					} else if (res.data.flag == 4) {
						this.statusName = '待上门'
					} else if (res.data.flag == 5) {
						this.statusName = '进行中'
					} else if (res.data.flag == 6) {
						this.statusName = '已完成'
					} else if (res.data.flag == 7) {
						this.statusName = '售后订单'
					} else if (res.data.flag == 8) {
						this.statusName = '待评价'
					} else if (res.data.flag == 9) {
						this.statusName = '待上门'
					}
				})
			},
			quotation(item) {
				uni.navigateTo({
					url: '/pages/myOrder/QuotationList/QuotationList?id=' + this.detail.order_id + '&moshi=' + this
						.detail.moshi
				})
			},
			back() {
				uni.navigateBack()
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.container {
		color: #333333;

		.postx {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
		}

		.buttons {
			text-align: center;
			width: 192rpx;
			height: 64rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 32rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 64rpx;
		}

		.posts {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			width: 710rpx;
			padding: 16rpx 20rpx;
			background-color: #FFF;
			box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.04);

			.buttonx {
				text-align: center;
				width: 188rpx;
				height: 60rpx;
				border-radius: 32rpx;
				border: 2rpx solid #666666;
				font-size: 26rpx;
				color: #666666;
				line-height: 60rpx;
			}
		}
	}
</style>
